<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../public/css/monokai_sublime.min.css">
    <link rel="stylesheet" href="../../public/css/heightlength.css">
    <link rel="stylesheet" href="../../public/css/mxjs.css">
    <link rel="stylesheet" href="../../public/css/prism.css">
    <script src="../../public/js/jquery.js"></script>
    <script src="../../public/js/highlight.min.js"></script>
    <script src="../../public/js/prism.js"></script>
    <script src="../../public/js/clipboard.min.js"></script>

</head>
<body>

<div class="container">
    <div class="jsbg">
        <div class="col-lg-12 mxlength">
            <div class="mx-1">
                <h2>jQuery选择器</h2>
                <p>1.ID的box进行触发</p>
                <p>2.class进行触发</p>
                <p>3.span等标签进行触发</p>
                <p>4.#box 子级 的进行触发</p>
                <p>5.class，ID等可多个</p>
                <p>6.*是全局选中</p>
                <p>7.可以是ul li 下的* 所有选中</p>
                <p>8.div当前含有class为box</p>
            </div>
        </div>
        <div class="col-lg-12  ">
      <pre class="mScroll">
        <code class="lang-javascript" >
	$("#box").css({ background :"#000" })

	$(".box").css({ background :"#000" })

	$("span").css({ background :"#000" })

	$("#box p").css({ background :"#000" })

	$(".box").eq().css({ background :"#000" })

	$(".box, #box2, span, div").css({ background :"#000" })

	$(".box  ul  li  a").css({ background :"#000" })

	$("*").css({ background :"#000" })

	$("ul li *").css({ background :"#000" })

	$("div.box").css({ background :"#000" })
		</code>
    </pre>
        </div>
    </div>
</div>
<script>
    window.onload=function(){

        var clipboard = new Clipboard('.toolbar-item');

        clipboard.on('success', function(e) {
            console.log(e.text);
        });

        clipboard.on('error', function(e) {
            console.log(e);
        });
    $(".toolbar-item").html("<span>复制</span>")
    }
</script>
</body>
</html>
